window.onload = function () {
  let img = document.getElementById("img");
  let spns = document.getElementsByTagName("span");
  let text = document.getElementById("text");

  let leftBtn = document.getElementById("left");
  leftBtn.addEventListener("click", goPreview);

  let rightBtn = document.getElementById("right");
  rightBtn.addEventListener("click", goNext);
  let currentIndex = 1;
  function goPreview() {
    currentIndex--;
    if (currentIndex == 0) {
      currentIndex = 3;
    }
    img.src = `../../img/img${currentIndex}.jpg`;
    changeBac();
    changeText();
  }
  function goNext() {
    currentIndex++;
    if (currentIndex == 4) {
      currentIndex = 1;
    }
    img.src = `../../img/img${currentIndex}.jpg`;
    changeBac();
    changeText();
  }
  //初始化底部按钮背景色
  spns[0].style.background = "black";
  //改变底部按钮变背景色
  function changeBac() {
    for (let i = 0; i < spns.length; i++) {
      if (currentIndex - 1 == i) {
        spns[i].style.background = "black";
      } else {
        spns[i].style.background = "#1b203f78";
      }
    }
  }
  //改变文字
  function changeText() {
    text.innerText = `${currentIndex}/3`;
  }
  setInterval(() => {
    goNext();
  }, 2000);
};
